<template>
  <div class="main">
    <div class="top">
      <div class="nav">
        <el-row>
          <el-col :span="3">
            <span class="title">作品频道:</span>
          </el-col>
          <el-col :span="2">
            <span :class="{ 'on': workDirectionOn == 0}" class="content" @click="loadCategoryList(0)">男频</span>
          </el-col>
          <el-col :span="3">
            <span :class="{ 'on': workDirectionOn == 1}" class="content" @click="loadCategoryList(1)">女频</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span class="title">作品分类:</span>
          </el-col>
          <el-col :span="2">
            <span :class="{ 'on': categoryOn == 0}" class="content" @click="changeCategory(0)">不限</span>
          </el-col>
          <el-col v-for="(item,index) in bookCategorys" :key="item.id" :span="3">
          <span :class="{ 'on': categoryOn == item.id }" class="content" @click="changeCategory(item.id)"
                v-text="item.name"></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span class="title">是否完结:</span>
          </el-col>
          <el-col :span="2">
            <span :class="{ 'on': bookStatusOn == null}" class="content" @click="changeBookStatus(null)">不限</span>
          </el-col>
          <el-col :span="3">
            <span :class="{ 'on': bookStatusOn == 0}" class="content" @click="changeBookStatus(0)">连载中</span>
          </el-col>
          <el-col :span="3">
            <span :class="{ 'on': bookStatusOn == 1}" class="content" @click="changeBookStatus(1)">已完结</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span class="title">作品字数:</span>
          </el-col>
          <el-col :span="2">
            <span :class="{ 'on': wordCountOn == null}" class="content" @click="changeWordCount(null, null)">不限</span>
          </el-col>
          <el-col :span="3">
            <span :class="{ 'on': wordCountOn == 0}" class="content"
                  @click="changeWordCount(0, 300000)">30万字以下</span>
          </el-col>
          <el-col :span="3">
          <span :class="{ 'on': wordCountOn == 300000}" class="content"
                @click="changeWordCount(300000, 500000)">30-50万字</span>
          </el-col>
          <el-col :span="3">
            <span :class="{ 'on': wordCountOn == 500000}" class="content" @click="changeWordCount(500000, 1000000)">50-100万字</span>
          </el-col>
          <el-col :span="3">
          <span :class="{ 'on': wordCountOn == 1000000}" class="content"
                @click="changeWordCount(1000000, null)">100万字以上</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span class="title">更新时间:</span>
          </el-col>
          <el-col :span="2">
            <span :class="{ 'on': updateTimeOn == null}" class="content" @click="changeUpdateTime(null)">不限</span>
          </el-col>
          <el-col :span="3">
            <span :class="{ 'on': updateTimeOn == 3}" class="content" @click="changeUpdateTime(3)">三日内</span>
          </el-col>
          <el-col :span="3">
            <span :class="{ 'on': updateTimeOn == 7}" class="content" @click="changeUpdateTime(7)">七日内</span>
          </el-col>
          <el-col :span="3">
            <span :class="{ 'on': updateTimeOn == 15}" class="content" @click="changeUpdateTime(15)">半月内</span>
          </el-col>
          <el-col :span="3">
            <span :class="{ 'on': updateTimeOn == 30}" class="content" @click="changeUpdateTime(30)">一月内</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span class="title">排序方式:</span>
          </el-col>
          <el-col :span="2">
            <span :class="{ 'on': sortOn == null}" class="content" @click="changeSort(null)">不限</span>
          </el-col>
          <el-col :span="3">
          <span :class="{ 'on': sortOn == 'last_chapter_update_time desc'}" class="content"
                @click="changeSort('last_chapter_update_time desc')">更新时间</span>
          </el-col>
          <el-col :span="3">
          <span :class="{ 'on': sortOn == 'word_count desc'}" class="content"
                @click="changeSort('word_count desc')">总字数</span>
          </el-col>
          <el-col :span="3">
            <span :class="{ 'on': sortOn == 'visit_count desc'}" class="content"
                  @click="changeSort('visit_count desc')">点击量</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="bottom">
      <div class="content">
        <el-table :data="books" :header-cell-style="{'font-size':'18px','color': 'red', 'textAlign': 'left' }" :show-overflow-tooltip="true"
                  style="width: 100%;margin: 0 auto;height: 48vh">
          <el-table-column label="序号" width="80">
            <template #default="scope">
              <span :class="'i-'+Number(scope.$index + 1)">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="类别" width="120">
            <template #default="scope">
              <div class="hover" @click="bookDetail(scope.row.id)">{{ scope.row.categoryName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="书名" width="200">
            <template #default="scope">
              <div class="hover" @click="bookDetail(scope.row.id)" v-html="scope.row.bookName"></div>
            </template>
          </el-table-column>
          <el-table-column label="最新章节" width="300">
            <template #default="scope">
              <div class="hover" @click="bookDetail(scope.row.id)">{{ scope.row.lastChapterName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="作者">
            <template #default="scope">
              <div v-html="scope.row.authorName"></div>
            </template>
          </el-table-column>
          <el-table-column label="字数">
            <template #default="scope">
              <div>{{ wordCountFormat(scope.row.wordCount) }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-nav">
        <el-pagination
            :background="backgroud"
            :page-size="pageSize"
            :total="total"
            class="mt-4"
            layout="prev, pager, next"
            small
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, toRefs, onMounted, ref} from "vue";
import {useRouter, useRoute} from "vue-router";
import {searchBooks, listCategorys} from "@/api/book";
import {addDay, dateFormat} from "@/utils/index";
import type {Book, BookCategory, SearchCondition} from "@/type/book";
import emitter from "@/utils/bus";

const route = useRoute();
const router = useRouter();

interface State {
  bookCategorys: BookCategory[];
  books: Book[],
  searchCondition: SearchCondition,
  backgroud: boolean,
  total: number,
  pageSize: number,
  imgBaseUrl: string,
  workDirectionOn: number,
  categoryOn: number,
  bookStatusOn: number | null,
  wordCountOn: number | null,
  updateTimeOn: number | null,
  sortOn: string | null
}


const state = reactive<State>({
  bookCategorys: [] as BookCategory[],
  books: [],
  searchCondition: {} as SearchCondition,
  backgroud: true,
  total: 0,
  pageSize: 10,
  imgBaseUrl: import.meta.env.VITE_APP_BASE_IMG_URL,
  workDirectionOn: 0,
  categoryOn: 0,
  bookStatusOn: null,
  wordCountOn: null,
  updateTimeOn: null,
  sortOn: null
});
const {
  bookCategorys,
  workDirectionOn,
  categoryOn,
  bookStatusOn,
  wordCountOn,
  updateTimeOn,
  sortOn,
  books,
  backgroud,
  pageSize,
  total
} = toRefs(state);
onMounted(() => {
  const key = route.query.key as string;
  state.searchCondition.keyword = key;
  state.searchCondition.pageSize = 10;
  loadCategoryList(0);
});

const search = async () => {
  const {data} = await searchBooks(state.searchCondition);
  state.books = data.list;
  state.searchCondition.pageNum = data.pageNum;
  state.searchCondition.pageSize = data.pageSize;
  state.total = Number(data.total);
};

const searchByK = (key: string) => {
  state.searchCondition.keyword = key;
  search();
};
emitter.on('eventSearch', searchByK);

const bookDetail = (bookId: number) => {
  router.push({path: `/book/${bookId}`});
};

const handleCurrentChange = (pageNum: number) => {
  state.searchCondition.pageNum = pageNum;
  search();
};

const loadCategoryList = async (workDirection: number) => {
  const {data}: { data: BookCategory[] } = await listCategorys({workDirection: workDirection});
  state.bookCategorys = data;
  state.workDirectionOn = workDirection;
  state.searchCondition.workDirection = workDirection;
  state.categoryOn = 0;
  state.searchCondition.categoryId = null;
  search();
};

const changeCategory = async (categoryId: number) => {
  state.categoryOn = categoryId;
  if (categoryId > 0) {
    state.searchCondition.categoryId = categoryId;
  } else {
    state.searchCondition.categoryId = null;
  }
  search();
};

const changeBookStatus = async (bookStatus: number | null) => {
  state.bookStatusOn = bookStatus;
  state.searchCondition.bookStatus = bookStatus;
  search();
};

const changeWordCount = async (wordCountMin: number | null, wordCountMax: number | null) => {
  state.wordCountOn = wordCountMin;
  state.searchCondition.wordCountMin = wordCountMin;
  state.searchCondition.wordCountMax = wordCountMax;

  search();
};

const changeUpdateTime = async (days: number | null) => {
  state.updateTimeOn = days;
  if (days) {
    state.searchCondition.updateTimeMin = dateFormat(
        "YYYY-mm-dd",
        addDay(-days)
    );
  } else {
    state.searchCondition.updateTimeMin = null;
  }
  search();
};

const changeSort = async (sort: string | null) => {
  state.sortOn = sort;
  state.searchCondition.sort = sort;
  search();
};

const wordCountFormat = (count: number) => {
  if (count > 50000) {
    return count / 10000 + "万";
  }
  if (count > 4000) {
    return count / 1000 + "千";
  }
  return count;
};

</script>

<style>
.main {
  background-color: #F5F5F5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .top {
    margin: 0 auto;
    width: 60%;
    background-color: #fff;
    padding: 10px 30px;
    box-sizing: border-box;
    text-align: left;
    //border: 1px solid #000;

    .nav {
      width: 70%;

      .title {
        line-height: 35px;
        color: #A2A2A2;
      }

      .content {
        line-height: 35px;
        padding-left: 0px;
        cursor: pointer;

      }

      .on {
        color: #FA7C32;
      }
    }

  }

  .bottom {
    margin: 10px auto 0;
    width: 60%;
    background-color: #fff;
    padding: 10px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .content {
      box-sizing: border-box;
      background-color: #fff;
      text-align: center;

      .el-table__row .cell span {
        display: block;
        background-color: #989898;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #FFFFFF;
      }

      .hover {
        &:hover {
          color: #FA7C32;
          cursor: pointer;

        }
      }
    }

    .page-nav {
      padding: 10px;
      margin: 10px auto 0;
    }

  }
}
</style>
